<template>
  <div class="main">
    <div
      class="containers"
      v-bind:class="{ isMobile: mobileFlag, notMobile: !mobileFlag }"
    >
      <el-divider></el-divider>
      <el-card
        class="box-card"
        v-for="(question, index) in questionList"
        :key="index"
        style="margin-top: 10px"
      >
        <div style="display: flex; margin-left: 20px">
          <div style="color: #409eff; margin-bottom: 8px; font-size: 18px">
            <div v-if="question.questionType == 'texts'" style="width: 90px">
              {{ index + 1 + ". " + "简答题" }}
            </div>
          </div>
          <div style="flex: 1"></div>
          <div style="color: #ffcd41; width: 120px; margin-right: 10%">
            {{ "（分值：" + question.questionScore + "）" }}
          </div>
        </div>
        <div style="font-size: 15px; margin-left: 2em">
          {{ question.content }}
        </div>

        <!-- 简答题 -->
        <div v-if="question.questionType == 'texts'" style="margin-left: 2em">
          <el-input
            type="textarea"
            :rows="question.rowNum"
            v-model="question.userAnswer"
            :disabled="true"
            style="margin-top: 10px; width: 96.5%"
          >
          </el-input>
        </div>
        <div class="answer">
          <div>
            批改分值：<span style="color: #409eff"
              ><el-input-number
                size="small"
                :min="0"
                :max="question.questionScore"
                v-model="question.userScore"
              ></el-input-number
            ></span>
          </div>
        </div>
        <div class="answer">
          <div>
            正确答案：<span style="color: #409eff">{{ question.correct }}</span>
          </div>
        </div>
      </el-card>
      <div style="width: 100%; margin-bottom: 8px; margin-top: 20px">
        
       <el-button
         type="primary"
         plain
         style="margin-left: 70%"
         @click="saveCheck()"
         >提 交</el-button>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      examPaperAnswerId: null,

      userId: null,
      correctNum: 0,

      mobileFlag: false,

      id: 0,
      title: "",
      realName: "",
      questionList: [],
      teacherScore: 0,
    };
  },
  methods: {
    saveCheck() {
      const _this = this;
      this.questionList.forEach((question) => {
        if (question.userScore > 0) {
          question.doRight = true;
          this.correctNum++;
          this.teacherScore += question.userScore;
        } else {
          question.doRight = false;
        }
      });
      let last = {};
      last.examPaperAnswerId = this.examPaperAnswerId;
      last.correctNum = this.correctNum;
      last.teacherScore = this.teacherScore;
      last.questionAnswerVOList = this.questionList;
      let datas = last;
      
      axios({
        method: "post",
        url: _this.APIurl.apiUrl.domainName + "/teacherCorrect/save",
        headers: {
          "Content-Type": "application/json",
        },
        data: datas,
      }).then(

      _this.$message({
        showClose: true,
        message: _this.realName+'的试卷批改成功',
        type: 'success'
      }),
      _this.$router.push({
        path: "/checkAnswers",
        query: {
          id: _this.id,
          title:_this.title
        }
      })

      );
    },
  },
  mounted() {
    let flag = navigator.userAgent.match(
      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
    );
    this.mobileFlag = flag;
    // this.questionList=sessionStorage.getItem('test');

    this.examPaperAnswerId = this.$route.params.id;
    const _this = this;

    this.id=this.$route.params.code;
      this.title=this.$route.params.title;
      this.realName=this.$route.params.realName;

    axios
      .get(
        _this.APIurl.apiUrl.domainName +
          "/teacherCorrect/getQuestion/" +
          _this.examPaperAnswerId
      )
      .then(function (response) {
        _this.questionList = response.data.data.questionAnswerVOList;
        _this.userId = response.data.data.userId;
      });
  },
};
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.answer {
  background: #f1f3f4;
  margin-left: 2em;
  margin-right: 2em;
  margin-top: 15px;
  padding: 5px;

  border-radius: 6px;
}
.main-top {
  display: flex;
}
.flexs {
  display: flex;
  justify-content: center;
}
.isMobile {
  width: 100%;
  padding: 0px;
}
.notMobile {
  width: 70%;
}
.containers {
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 5%;
}
.answer-tip {
  margin-left: 2em;
}
/* .main :first-child  /deep/ .el-card__body{
    padding-left: 0px;
    padding-right: 0px;
} */
</style>
